<template>
  <!-- 权限列表组件 -->
  <div class="rights_cont">
    <!-- 面包屑导航栏区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片展示权限列表内容区域 -->
    <el-card class="box-card">
      <el-table :data="rightsList2" style="width: 100%" border>
        <el-table-column type="index" label="#" width="100"></el-table-column>
        <el-table-column prop="authName" label="权限名称">
        </el-table-column>
        <el-table-column prop="path" label="路径">
        </el-table-column>
        <el-table-column prop="level" label="权限等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level === '0'">一级</el-tag>
            <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
            <el-tag type="warning" v-else>三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-------------------------------------- 重点：优化（数据全部获取到了） ---------------------------------------->
      <!-- 分页按钮区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pagination.currentPage" :page-sizes="[5, 7, 10, 15]" :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :background="true">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 权限列表
        rightsList1: [],
        // 优化：分页所需参数
        pagination: {
          total: 0, // 角色列表总条数
          currentPage: 1, // 当前页数
          pageSize: 5 // 每页显示几条数据
        },
        // 优化：分页控制展示的角色列表
        rightsList2: [],

      }
    },
    created() {
      // 获取所有的权限列表
      this.getRightsList()
    },
    methods: {
      // 获取所有的权限列表
      async getRightsList() {
        let {
          data: res
        } = await this.$http.get('rights/list')
        if (res.meta.status === 200) {
          this.rightsList1 = res.data
          this.pagination.total = res.data.length
          this.setRolesList()
        } else {
          this.$message.error("获取权限列表失败！")
        }
      },

      // 优化：分页-每页几条数据
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.setRolesList()

      },


      // 优化：分页-当前页数
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        this.setRolesList()

      },


      // 优化：请求直接返回全部数据的分页展示方法
      setRolesList() {
        /*------------------------------------- 重点 ---------------------------------
          数据在请求时就全部获取到了，所以不再是按参数获取对应分页数据了
          需要自己截取分页对应的那段数组内容，使用：slice()方法截取数组
          返回一个索引和另一个索引之间的数据，不改变原数组
          slice(开始索引，结束索引)，必填参数两个
          而-开始索引为：(当前页数-1)*每页显示条数 ； 结束索引为：当前页数 * 每页显示条数
        */
        let index = (this.pagination.currentPage - 1) * this.pagination.pageSize
        let index2 = this.pagination.currentPage * this.pagination.pageSize

        this.rightsList2 = this.rightsList1.slice(index, index2)
      }
    }
  }

</script>

<style lang="less" scoped>


</style>
